<!DOCTYPE html>
<html layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title th:text="#{screen.surrogates.account.selection.header}">Surrogate Account Selection View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div class="mdc-card p-4 m-auto w-lg-66" layout:fragment="content">
        <form id="loginForm" method="post">

            <div class="banner banner-danger" th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
                    <span th:each="message : ${flowRequestContext.messageContext.allMessages}"
                          th:utext="#{${message.text}}">Message
                        Text</span>
            </div>

            <div class="my-3">
                <h2 th:text="#{screen.surrogates.choose.account}">Choose Account</h2>
                <div th:utext="#{screen.surrogates.message}">
                    <p>You are provided with a list of accounts on behalf of which you are allowed to authenticate.
                    </p>
                    <p>Select one and continue.</p>
                </div>
                <label class="fl-label" for="surrogateTarget">Account:</label>
                <select class="custom-select" id="surrogateTarget" name="surrogateTarget">
                    <option th:each="surrogate: ${surrogates}" th:text="${surrogate}" th:value="${surrogate}"/>
                </select>
            </div>
            <input name="execution" th:value="${flowExecutionKey}" type="hidden"/>
            <input name="_eventId" type="hidden" value="submit"/>
            <div class="d-flex">
                <button accesskey="l" class="mdc-button mdc-button--raised mr-2" name="submit"
                        th:value="#{screen.welcome.button.login}" value="Login">
                    <span class="mdc-button__label" th:text="#{screen.welcome.button.login}">Login</span>
                </button>
                <a class="mdc-button mdc-button--outlined" id="cancel" name="cancel" th:href="@{/login}"
                   th:unless="${service}">
                    <span class="mdc-button__label" th:text="#{screen.surrogates.button.cancel}">Cancel</span>
                </a>
                <a class="mdc-button mdc-button--outlined" id="login" name="login" th:href="${service.id}"
                   th:if="${service}">
                    <span class="mdc-button__label" th:text="#{screen.error.page.loginagain}">Login</span></a>
            </div>
        </form>
    </div>
</body>

</html>